<template>
    <div>
        <van-nav-bar title="上报" left-text="主页" left-arrow @click-left="$router.push('/home/home')" fixed />
        <van-cell v-for="item in list" :key="item" :title="item" />

        <div class="block"></div>

        <div></div>

        <div class="imge">
            <h1>图片上传:</h1>
            <div class="poton">
                <div>
                    <van-uploader v-model="fileList" :after-read="onAfterRead" :max-count="1" accept="image/*"
                        name="uploader" :max-size="5 * 1024 * 1024">
                        <van-button type="primary">+</van-button>
                    </van-uploader>
                </div>
            </div>
        </div>
        <div class="text">
            <van-form @submit="onSubmit(enterData)">
                <van-cell-group inset>
                    <van-field v-model="enterData.licenseplate" name="licenseplate" label="车牌号" placeholder="车牌号"
                        :rules="licensePlateRegex" />
                    <van-field v-model="enterData.report_reason" name="report_reason" label="举报原因" placeholder="举报原因"
                        :rules="reportReasonRegex" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { Toast } from 'vant';
import { POST, GET, UPLOAD } from "../../tools/fetch";
import { reportApi } from '../../tools/api.js';
import { showSuccessToast, showFailToast,showToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useUserStore } from '../../tools/storage.js';
const userStore = useUserStore();

//获取图片
const fileList = ref([])
let uploadedFile = ref()// 存储文件路径

// 接收用户输入的内容
const enterData = ref({
    file: '',
    licenseplate: '',
    report_reason: '',
    //车牌号正则
    licenseplateRules: [
        { required: true, message: '车牌号不能为空', trigger: 'onSubmit' },
        { pattern: /^[\u4E00-\u9FA5][A-Z][A-Z0-9]{5}$/, message: '车牌号错误', trigger: 'onSubmit' }
    ],
    // 密码正则 
    reasonRules: [
        { required: true, message: '描述不能为空', trigger: 'onSubmit' },
        { pattern: /^.{1,500}$/, message: '错误', trigger: 'onSubmit' }
    ]
})


const onAfterRead = (file) => {
    // 获取上传的文件对象信息
    uploadedFile = file.file;
    onUpload('上传图片');
}

const onUpload = async (source) => {
    const formData = new FormData();
    formData.append('file', uploadedFile);
    formData.append('source', source);
    // 发送请求
    const resResult = await UPLOAD(formData)
    enterData.value.file = resResult.key
    
    showSuccessToast('上传成功');
}


// 提交表单并更新数据库
const onSubmit = async (values) => {
    console.log('这是values',values)
    const resResult = await POST({
        api: reportApi.upload,
        data: {
            report_image:values.file,
            licenseplate:values.licenseplate,
            report_reason:values.report_reason
        }
    })
    console.log(resResult);
    showSuccessToast('上传成功')
    setTimeout(() => {
        router.push('/home/home')
    }, 1000)
}
</script>

<style lang="less" scoped>
.block {
    height: 7vh;
}

.imge {
    width: 90%;
    margin: 0 auto;
    padding-top: 2vh;

    h1 {
        margin-left: 5vw;
        font-size: 5vw;
        padding-bottom: 1vh;
    }
}

.poton {
    width: 85%;
    height: 20vh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: @--base-white;
    border-radius: 10px;
    border: 4px solid #ffffff;
    box-shadow: 0px 0px 5px 2px#919191;
}

.text {
    width: 90%;
    padding-top: 2vh;
    margin: 0 auto;
}
</style>